<template>
  <section class="consumer">
    <el-col :span="24" class="action-bar">
			<el-input class="action-bar-input" placeholder="输入手机号码" v-model="phone"></el-input>
			<el-button type="primary" size="medium" @click="search">筛选</el-button>
    </el-col>
    <!--列表-->
		<el-table :data="userList" highlight-current-row class="el-table-style">
			<el-table-column type="selection" width="55"/>
			<el-table-column type="index" width="60"/>
			<el-table-column prop="nickname" label="姓名" width="150"/>
			<el-table-column prop="realname" label="照片" width="140" sortable>
				<template slot-scope="scope">
					<div>
						<img :src="scope.row.user_thumb" @click="prevImg(scope.row.user_thumb)" alt="" style="width:60px;border-radius:50%;height:60px;object-fit:cover">
					</div>
				</template>
			</el-table-column>
			<!-- <el-table-column prop="sex" label="企业名称" width="150"/> -->
			<!-- <el-table-column prop="position" label="职位" width="100"/> -->
			<el-table-column prop="sex" label="性别" width="100">
			</el-table-column>
			<el-table-column label="籍贯" width="180">
				<template slot-scope="scope">
						<div>{{scope.row.birthplace}}</div>
					</template>
			</el-table-column>
			<el-table-column prop="phone" label="手机号" width="150"/>
			<el-table-column label="个性化标签" min-width="150">
				<template slot-scope="scope" v-if="scope.row.label_name">
					<el-tag>
						{{scope.row.label_name}}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作" min-width="250">
				<template slot-scope="scope">
					<!-- <el-button type="primary" size="mini" @click=" bindMemberShow()">绑定会员</el-button> -->
					<el-button type="Success" size="mini" @click="getUserDetail(scope.row.id,scope.row.user_id)">查看详情</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-col :span="24" class="footer-bar">
			<div class="page-code">
				<el-pagination 
				background
				layout="prev, pager, next"
				:total="totalPage"
				:page-size="16"
				@current-change="pageChange"
				>
				</el-pagination>
          	</div>
    	</el-col>

    <!-- 弹出的编辑窗口 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="30%"
      height="50%"
      center
      class="editor-dialog"
      >
     			<el-form  label-width="120px"  ref="detailForm" label-position="left">
				<el-form-item label="姓名" prop="nickname">
					<div>{{memberDetail.nickname}}</div>
				</el-form-item>
				<el-form-item label="性别" prop="sex">
					<div>{{memberDetail.sex}}</div>
				</el-form-item>
				<el-form-item label="手机" prop="phone">
					<div>{{memberDetail.phone}}</div>
				</el-form-item>
				<el-form-item label="籍贯" prop="origin">
					<div>{{memberDetail.home_province}}{{memberDetail.home_city}}{{memberDetail.home_area}}{{memberDetail.home_address}}</div>
				</el-form-item>
				<el-form-item label="所在地区" >
					<div>{{memberDetail.province}}{{memberDetail.city}}{{memberDetail.area}}{{memberDetail.address}}</div>
				</el-form-item>
				<el-form-item prop="tag" label="个性化标签" width="180" >
					<div v-if="memberDetail.labels">
						<span v-for="(tag,index) of memberDetail.labels" :key="index"  style="padding:0 20px">
							{{tag.name}}
						</span>
					</div>		
				</el-form-item>
				<el-form-item label="毕业院校" prop="graduated_school">
					<div>{{memberDetail.graduated_school}}</div>
				</el-form-item>
				<el-form-item label="学历层次" >
					<div>{{memberDetail.education_level}}</div>
				</el-form-item>
				<!-- <div v-for="(item,index) of memberDetail.companys" :key="index">
					<el-form-item label="企业名称" >
						<div>{{item.company_name}}</div>
					</el-form-item>
					<el-form-item label="企业经营范围" prop="cost">
						<div>{{item.company_business_scope}}</div>
					</el-form-item>
					<el-form-item label="企业简介" prop="expires">
						<div>{{item.company_synopsis}}</div>
					</el-form-item>
				</div> -->
			</el-form>
    </el-dialog>
		<!-- 绑定会员窗口 -->
    <el-dialog
      :visible.sync="bindMenberDialogVisible"
      width="40%"
      center
      :title="dialogTit"
      @close="handleClose"
      >
      <el-form :label-position="'left'" label-width="120px">
        <el-form-item label="用户" >
          <el-autocomplete
            v-model="userName"
            :fetch-suggestions="MenberQuerySearchAsync"
            placeholder="请输入内容"
            @select="MenberHandleSelect"
            style="width:300px"
          >
					</el-autocomplete>
        </el-form-item>
        <el-form-item label="会员等级" >
          <el-autocomplete
            v-model="levelName"
            :fetch-suggestions="LevelQuerySearchAsync"
            placeholder="请输入内容"
            @select="LevelHandleSelect"
            style="width:300px"
          >
					</el-autocomplete>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="this.bindMenberDialogVisible = false;">取消</el-button>
        <el-button type="primary" @click="bindMember('bind')">提交</el-button>
      </span>
    </el-dialog>
		<!-- 绑定会员窗口 end -->
	<!-- 图片预览 -->
		<el-dialog :visible.sync="prevImgVisible" size="tiny" center width="500px">
			<div style="display:flex;justify-content:center">
				<img style="max-width:100%" :src="dialogImageUrl" alt="">
			</div>
		</el-dialog>
		<!-- 图片预览 end -->
  </section>
</template>

<script>
export default {
	data(){
		return {
			prevImgVisible:false,//图片预览的显示
			dialogImageUrl:'',//预览的图片地址
      		phone:'',//搜索的电话号
			userList:[],
			dropColumnName:'选择筛选的状态',
			dialogVisible:false,//编辑状态的弹窗
			totalPage:0,
			page:1,
			memberDetail:{},
			bindMemberForm:{
				user_id: '',
				vip_id: ''
			},
			userName: '',
			levelName: '',
			bindMenberDialogVisible: false,
			dialogTit:'绑定会员',
		}
  },
  methods: {
		//查询用户
		async MenberQuerySearchAsync(queryString, cb) {
			let params = {
				nickname:queryString
			}
			const res = await this.$api.getUserList(params);
			if(res.data.level=='success'){
				let list = res.data.data.user_list;
				let newList = [];
				list.forEach((item)=>{
					let obj = {};
					obj.user_id = item.user_id; 
					obj.value = item.realname;
					newList.push(obj);
				})
				cb(newList);      
			}else{
				this.$message({
					message: res.data.message,
					type: 'warning'
				});
			}
		},
		MenberHandleSelect(item) {
			//获得用户id
			this.bindMemberForm.user_id = item.user_id;
			this.userName = item.value
		},
		//查询会员等级
		async LevelQuerySearchAsync(queryString, cb) {
			const res = await this.$api.getUserVipRule();
			if(res.data.level=='success'){
				let list = res.data.data.vip_list;
				let newList = [];
				list.forEach((item)=>{
					let obj = {};
					obj.vip_id = item.id; 
					obj.value = item.name;
					newList.push(obj);
				})
				cb(newList);      
			}else{
				this.$message({
					message: res.data.message,
					type: 'warning'
				});
			}
		},
		LevelHandleSelect(item) {
			//获得用户id
			this.bindMemberForm.vip_id = item.vip_id;
			this.levelName = item.value
		},
		handleClose() {
			//弹窗关闭前的回调
			this.initData();
		},
		initData(){
			this.bindMemberForm = {
				user_id:'',
				vip_id:''
			}
			this.userName = ''
		},
		bindMemberShow(){
			this.bindMenberDialogVisible = true;
		},
		async bindMember(type){
			let params = {
				user_id: this.bindMemberForm.user_id,
				vip_id: this.bindMemberForm.vip_id,
				type: type
			}
			const res = await this.$api.userBindVip(params);
			if(res.data.level=='success'){
				this.$message({
					message: res.data.message,
					type: 'success'
				});
				this.bindMenberDialogVisible = false;   
			}else{
				this.$message({
					message: res.data.message,
					type: 'warning'
				});
			}
		},
		prevImg(url){
			this.dialogImageUrl=url;
			this.prevImgVisible=true;
		},
			columnChange(e){
				//选中筛选类别
				this.dropColumnName=e
		},
		search(){
			//筛选
			this.getUserList()
		},
    handleClose(){
      //编辑弹窗关闭前的回调

    },
    async getUserList(){
      //获取用户列表
      const res=await this.$api.getUserList({
        page:this.page,
        pagesize:16,
        phone:this.phone
      })
      if(res.data.level=='success'){
				let userList=res.data.data.user_list
				userList.map(val=>{
					return val.sex=this.$currency.sexTag(val.sex)
        })
        this.userList=userList
		this.totalPage=res.data.data.total
			}
    },
    pageChange(e){
	  //翻页
      this.page=e;
      this.getUserList()
    },
    async getUserDetail(id,uid){
      //查看用户详情
      this.dialogVisible=true
      const res=await this.$api.getUserDetail({
        id,
        uid
	  })
	  if(res.data.level=='success'){
		  let data=res.data.data.user_info;
		  data.sex=this.$currency.sexTag(data.sex);
		  this.memberDetail=data
	  }else{
		  this.$message({
			  type:'error',
			  message:res.data.message
		  })
	  }
    }
  },
  mounted() {
    this.getUserList()
  },
}
</script>
<style lang='scss' scoped>
  .consumer{
    .task-form-text{
				color: #666666;
			}
    .action-bar{
			background-color: #f2f2f2;
			height: 60px;
      margin: 10px 0px;
      box-sizing: border-box;
			display: flex;
			align-items: center;
			padding-left: 20px;
			.action-bar-input{
				width: 250px;
				margin-right: 14px;
			}
		}
		.el-table-style{
			width: 100%;
			border: 1px solid #f2f2f2;
		}
		.footer-bar{
			display: flex;
			justify-content: space-between;
			align-items: center;
      background: #f2f2f2;
      padding: 8px;
      margin: 10px 0px;
      box-sizing: border-box;
		}
		.dialog-footer{
			text-align: center;
		}
  }
</style>

<style>
	
	.el-pagination.is-background .el-pager li,
	.el-pagination.is-background .btn-prev,
	.el-pagination.is-background .btn-next
	{
		background-color: #fff;
		border: 1px solid #f1f1f1;
		margin: 0;
	}

 .consumer .el-dialog__body{overflow: auto;}
</style>
